<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-top: 50px;
        }

        .p {
            background-color: yellow;
        }

        /* 
        浮动元素不会遮挡下方上移的文字 我们建议利用此特性制作文字环绕效果
        
        */


        .sp {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 行级元素默认高度和宽度都是由内容撑开 不可以设置高宽
            但是如果设置行级元素浮动 那么元素就会变成块级元素 */
            float: left;
        
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p class="p">
        123456好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
        好好学习好好学习好好学习好好学习好好学习好好学习
    </p>

    <!-- 如果块级元素没有设置高度和宽度 那么浮动以后只能被内容所撑开 -->
    <div style="background-color: green; float: left;">我是div</div>


    <hr>
    <div></div>
    <p></p>
    <span class="sp">我是行级元素</span>
</body>

</html>